<template>
  <div class="app-container">
    <el-row>
      <h3>订单详情</h3>
      <div v-if="orderDetail" class="order-info">
        <div class="order-info-column">
          <p>商品名称：{{ orderDetail.names }}</p>
          <p>订单号：{{ orderDetail.orderNo }}</p>
          <p>支付状态：{{
            orderDetail.status === 0 ? '待支付' :
            orderDetail.status === 1 ? '待发货' :
            orderDetail.status === 2 ? '待收货' :
            orderDetail.status === 3 ? '待评价' :
            orderDetail.status === 4 ? '已评价' :
            orderDetail.status === -1 ? '已取消' : ''
          }}</p>
          <p>下单时间：{{ orderDetail.createdTime }}</p>
          <p>支付时间：{{ orderDetail.payedTime ? orderDetail.payedTime : '--' }}</p>
        </div>
        <div class="order-info-column">
          <p>商品总数：{{ orderDetail.amount }}</p>
          <p>商品总价：{{ orderDetail.goodsPrice }}</p>
          <p>邮费价格：{{ orderDetail.postage }}</p>
          <p><strong>订单金额：{{ orderDetail.payPrice }}</strong></p>

        </div>
      </div>
    </el-row>

    <el-row style="padding: 20px 0">
      <el-table
        :data="pagedList"
      >

        <el-table-column v-slot="scope" label="封面">
          <template>
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.cover"
              fit="fill"
            />
          </template>
        </el-table-column>

        <el-table-column label="规格" prop="attrInfoStr" />
        <el-table-column label="单价" prop="price" />
        <el-table-column label="数量" prop="amount" />
        <el-table-column label="商品总价" prop="totallPrice" />
        <el-table-column label="邮费" prop="totallPostage" />
        <el-table-column label="邮费说明" prop="totallPostageDesc" />
      </el-table>
    </el-row>
    <el-row
      style="padding: 20px 0"
    >
      <el-pagination
        :current-page.sync="pageParam.pageNum"
        :page-sizes="[10, 50, 100, 200,1]"
        :page-size="pageParam.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="itemList.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>

  </div>
</template>

<script>

import { detail } from '@/api/pp/order/order'
export default {
  data() {
    return {
      orderId: undefined,
      orderDetail: undefined,
      itemList: [],
      pageParam: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  computed: {
    pagedList() {
      const start = (this.pageParam.pageNum - 1) * this.pageParam.pageSize
      const end = this.pageParam.pageNum * this.pageParam.pageSize
      return this.itemList.slice(start, end)
    }
  },
  mounted() {
    this.orderId = parseInt(this.$route.query.id)
    this.getDetail()
  },
  methods: {

    getDetail() {
      detail(this.orderId).then(res => {
        this.orderDetail = res.data
        this.itemList = res.data.itemInfo
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.el-dialog__body {
  padding-top: 0;
}

.order-details {
  margin: 20px;
}

.order-header {
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.order-info {
  display: flex;

  .order-info-column {
    flex: 1;

    p {
      margin: 5px 0;
    }
  }
}

.product-list {
  margin-top: 20px;
}

.product-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;

  .product-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin-right: 10px;
  }

  .product-details {
    display: flex;
    flex: 1;

    .product-details-column {
      flex: 1;
      margin-right: 10px;

      p {
        margin: 5px 0;
      }
    }
  }
}
</style>
